<template>
	<view>
		<!-- 验证码登录注册 -->
		<view class="main mt-6">
			<view class="font-lg font-weight text-primary">账号密码注册</view>
			<!-- 手机号 -->
			<view class="flex align-center border-bottom mt-8" style="height:80rpx ;">
				<!-- 电话选区 -->
				<!-- <view style="color:#3D3D3D;">+{{ region }}</view> -->
				<!-- <view class="ml-1 iconfont icon-iconicyihuifu-13"></view> -->
				<view class="font-sm "><input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号"
						placeholder-style="font-size:28rpx;color:#CCCCCC;" /></view>
				<text v-if="phone" class="icon-a-qingkongpng iconfont close-icon ml-auto" @click="phone = ''"></text>
			</view>
			<!-- 验证码 -->
			<view class="flex align-center justify-between mt-5" style="height:80rpx ;">
				<view class="font-sm border-bottom flex align-center" style="width: 355rpx;height: 80rpx;"
					@click="clickCode">
					<input type="number" value="" v-model="code" maxlength="4" placeholder="请输入验证码"
						:disabled="sendCode ? false : true" placeholder-style="font-size:28rpx;color:#CCCCCC;" />
					<view v-if="code" class="icon-a-qingkongpng iconfont close-icon" @click="code = ''"></view>
				</view>
				<view class="text-light text-white px-2 py-1" :style="isActiveCode" @click="send()">{{ codeText }}
				</view>
			</view>

			<!-- 密码 -->
			<view class="flex align-center  border-bottom mt-5" style="height:80rpx ;">
				<view class="text-secondary password-title">密码</view>
				<view class="flex align-center w-100">
					<input type="password" style="width: 90%;" v-if="isShowPassowrd" maxlength="16" v-model="password"
						placeholder="请输入密码" placeholder-style="font-size:28rpx;color:#CCCCCC;" />
					<input type="text" v-else v-model="password" maxlength="16" placeholder="请输入密码"
						placeholder-style="font-size:28rpx;color:#CCCCCC;" />
					<view v-if="password" class="mr-1 icon-a-qingkongpng iconfont close-icon" @click="password = ''">
					</view>
				</view>
				<view class="iconfont text-secondary ml-auto" @click="isShowPassowrd = !isShowPassowrd"
					:class="isShowPassowrd ? 'icon-a-passwordoff' : 'icon-a-passwordon'"></view>
			</view>
			
			<view class="flex align-center  border-bottom mt-5" style="height:80rpx ;">
				<view class="text-secondary password-title">邀请码</view>
				<view class="flex align-center w-100">
					
					<input type="text"  v-model="invitationCode" maxlength="16" placeholder="请输入邀请码"
						placeholder-style="font-size:28rpx;color:#CCCCCC;" />
				
				</view>
			</view>

			<!-- 登录/注册 -->
			<view class="text-white mt-9 flex align-center justify-center" :style="isActiveLogin"
				style="height: 90rpx; box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);" @click="openMessage()">注册
			</view>

			<!-- 协议 -->
			<view class="font-sm flex align-center justify-center" style="margin-top: 38rpx;">
				<checkbox-group name="" @change="checkboxChange">
					<label>
						<checkbox value="0" color="#3C8EFF" style="transform:scale(0.5);color:#3C8EFF;" />
					</label>
				</checkbox-group>
				<text class="text-secondary bottomStyle">同意</text>
				<text class="main-text-color bottomStyle" @click="nurseNeed">《护士小鹿服务协议》</text>
				<text class="text-secondary bottomStyle">和</text>
				<text class="main-text-color bottomStyle" @click="hide">《隐私政策》</text>
			</view>

			<!-- 滑块验证 -->
			<view class="">
				<uni-popup ref="popup" type="center">
					<view class="sunui">
						<view class="font-sm close p-2" @click="close()">关闭</view>
						<sunui-mverify @change="mverify"></sunui-mverify>
					</view>
				</uni-popup>
			</view>
		</view>
		<uni-popup ref="message" type="center">
			<view class="permission-bc" style="width: 540rpx;height:676rpx">
				<view style="height: 73%;"></view>
				<view @click="goRegister" class="d-center" style="height: 78rpx;color: #fff;font-size: 32rpx;">马上开启
				</view>
				<view @click="closeMessage" class="d-center" style="height: 78rpx;font-size: 28rpx;color: #999999;">以后再说
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import permision from '@/common/js/permission.js'
	// 弹窗验证
	import sunuiMverify from '@/components/uni-ui/sunui-mverify/sunui-mverify.vue'
	// 引入弹窗组件
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'

	// 验证密码手机号
	import {
		validatePassword,
		validatePhone,
		validateCode,
		clearSpace,
	} from '@/common/js/validate.js'
	import {
		register,
		senMsg
	} from '../../../apis/login/index.js'
	export default {
		components: {
			uniPopup,
			sunuiMverify,
		},

		data() {
			return {
				loc: -1,
				phone: '', //手机号码
				code: '', //验证码
				password: '', //密码
				codeText: '发送验证码', //验证码按钮显示内容
				invitationCode: '',
				sendCode: true, //是否点击了发送验证码
				isShowPassowrd: true, //是否显示密码

				isAgree: false, //是否同意协议

				countTimer: 60, //全局保存倒计时60s

				region: 86, //默认电话区域中国

				resultData: {}, //滑块验证数据
			}
		},

		computed: {
			// 动态改变背景颜色
			isActiveCode() {
				if (this.phone && this.countTimer == 60) {
					return `background-color: #3C8EFF;`
				} else {
					return `background: #ADCEFB`
				}
			},
			isActiveLogin() {
				if (this.code && this.phone && this.password) {
					return `background-color: #3C8EFF;`
				} else {
					return `background: #ADCEFB`
				}
			},
		},
		onLoad() {
			this.getMision()
			uni.setStorageSync('userInfo', null)
			// 注册的时候需要获取手机型号
			this.newAppInit()
		},
		methods: {
			async getMision() {
				if (uni.getSystemInfoSync().platform == 'android') {
					// 安卓权限查询CALL_PHONE
					this.loc = await permision.checkAndroidSelfPermission(
						'android.permission.READ_PHONE_STATE'
					)
					console.log('anzhuo', this.loc)
				}
			},
			openMessage() {
				let that = this
				this.getMision()
				if (this.loc == -1) {
					that.$refs.message.open()
				} else {
					that.goRegister()
				}
			},
			closeMessage() {
				this.$refs.message.close()
			},
			// 滑块验证
			mverify(e) {
				console.log('验证结果:', e)
				// 验证通过
				if (e.msg) {
					setTimeout(() => {
						this.close()
					}, 500)
					// 发送验证码
					senMsg({
						mobile: clearSpace(this.phone),
						uuid: this.$store.state.uuid,
						type: 4,
					}).then((res) => {
						console.log(res, '注册信息')
						if (res.success) {
							plus.nativeUI.toast(res.codeMsg.msg)
							// uni.showToast({
							// 	title: res.codeMsg.msg,
							// 	icon: 'none'
							// });
							// 计时器
							this.countDownTime()
						}
					})
					// 用户可以输入验证码了
					this.sendCode = true
				}
			},
			nurseNeed() {
				uni.navigateTo({
					url: '../../mine/nurse-need/nurse-need',
				})
			},
			hide() {
				uni.navigateTo({
					url: '../../mine/hide/hide',
				})
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			clickCode() {
				if (!this.sendCode) {
					plus.nativeUI.toast('请点击右侧发送验证码~')
					// uni.showToast({
					// 	title: '请点击右侧发送验证码~',
					// 	icon: 'none'
					// });
				}
			},
			// 是否同意
			checkboxChange(e) {
				let flag = e.target.value.indexOf('0')
				if (flag != -1) {
					this.isAgree = true
				} else {
					this.isAgree = false
				}
				console.log(e.target.value, this.isAgree)
			},
			// 定时器倒计时
			countDownTime() {
				if (this.countTimer == 60) {
					this.codeText = '重新发送' + this.countTimer + 's'
					var timer = setInterval(() => {
						if (this.countTimer > 0) {
							this.countTimer--
							this.codeText = '重新发送' + this.countTimer + 's'
						} else {
							this.codeText = '发送验证码'
							clearInterval(timer)
							this.countTimer = 60
						}
					}, 1000)
				}
			},
			// 发送验证码
			send() {
				// 校验手机号
				if (validatePhone(this.phone)) {
					// 打开验证弹窗
					this.$refs.popup.open()
				}
			},
			// 用户注册
			async goRegister() {
				// console.log(this.$store.state.system.brand, '注册信息是');
				// 校验密码和验证码
				if (validatePassword(this.password) && validateCode(this.code)) {
					// 是否点击同意协议
					if (!this.isAgree) {
						plus.nativeUI.toast('请您同意产品服务协议及隐私政策')
						// uni.showToast({
						// 	title: '请您同意产品服务协议及隐私政策',
						// 	icon: 'none'
						// });
						return
					}
					if (this.loc == -1) {
						this.closeMessage()
					}
					let ress = uni.getSystemInfoSync()
					console.log(ress.brand, '======================kkkkkk')
					let data = {
						agreement: 1,
						code: clearSpace(this.code),
						mobile: clearSpace(this.phone),
						password: clearSpace(this.password),
						registerSource: ress.brand,
						uuid: this.$store.state.uuid,
						invitationCode: clearSpace(this.invitationCode),
					}
					let res = await register(data)
					console.log(res, 'zhuce........')
					if (res.success) {
						// #ifdef APP-PLUS
						plus.nativeUI.toast('注册成功~')
						// #endif
						// #ifdef H5
						uni.showToast({
							title: '注册成功~',
							icon: 'none',
						})
						// #endif
						// 跳转到登录页
						setTimeout(() => {
							uni.reLaunch({
								url: '../login/login',
							})
						}, 300)
					}
				}
			},
			newAppInit() {
				let data = {}
				let res = uni.getSystemInfoSync()
				console.log(res, '手机系统信息是')
				data.platform = res.platform //手机
				data.brand = res.brand //手机品牌
				this.$store.commit('setSystem', data)
			},
		},
	}
</script>

<style lang="scss" scoped>
	// 输入框输入的时候字体为32rpx
	::v-deep.uni-input-input {
		/*deep样式穿透，直接从底部修改*/
		font-size: 32rpx !important;
	}

	.main {
		padding: 0 80rpx;
	}

	// 滑块验证样式
	.sunui {
		position: relative;
		width: 652rpx;
		height: 320rpx;
		background-color: #ffffff;
		margin: 0 auto;
	}

	.close {
		width: 90rpx;
		height: 90rpx;
	}

	.close-icon {
		font-size: 48rpx;
	}

	.password-title {
		// width: 88rpx;
		white-space: nowrap;
		margin-right: 32rpx;
	}
	
	.permission-bc {
		background-image: url('http://loto.oss-cn-shanghai.aliyuncs.com/email/8125ac62f7ad4ad2.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
</style>